<template>
  <div class="apply-teacher-page">
    <van-nav-bar
      title="申请成为讲师"
      left-arrow
      @click-left="$router.back()"
    />
    
    <div class="apply-form">
      <van-form @submit="onSubmit">
        <!-- 基本信息 -->
        <div class="form-section">
          <div class="section-title">基本信息</div>
          <van-field
            v-model="formData.name"
            name="name"
            label="真实姓名"
            placeholder="请输入真实姓名"
            :rules="[{ required: true, message: '请填写真实姓名' }]"
          />
          <van-field
            v-model="formData.phone"
            name="phone"
            label="手机号码"
            placeholder="请输入手机号码"
            :rules="[
              { required: true, message: '请填写手机号码' },
              { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码' }
            ]"
          />
          <van-field
            v-model="formData.email"
            name="email"
            label="电子邮箱"
            placeholder="请输入电子邮箱"
            :rules="[
              { required: true, message: '请填写电子邮箱' },
              { pattern: /.+@.+\..+/, message: '请输入正确的邮箱格式' }
            ]"
          />
        </div>

        <!-- 教学信息 -->
        <div class="form-section">
          <div class="section-title">教学信息</div>
          <van-field
            v-model="formData.teachingArea"
            name="teachingArea"
            label="教学领域"
            is-link
            readonly
            placeholder="请选择教学领域"
            @click="showAreaPopup = true"
          />
          <van-popup v-model:show="showAreaPopup" position="bottom">
            <van-picker
              :columns="teachingAreas"
              @confirm="onAreaConfirm"
              @cancel="showAreaPopup = false"
            />
          </van-popup>

          <van-field
            v-model="formData.experience"
            name="experience"
            label="教学经验"
            type="textarea"
            rows="3"
            placeholder="请描述您的教学经验和成果"
            :rules="[{ required: true, message: '请填写教学经验' }]"
          />
        </div>

        <!-- 资质证明 -->
        <div class="form-section">
          <div class="section-title">资质证明</div>
          <van-field name="certificate" label="资质证书">
            <template #input>
              <van-uploader
                v-model="formData.certificate"
                multiple
                :max-count="5"
                :after-read="afterRead"
              />
            </template>
          </van-field>

          <van-field
            v-model="formData.introduction"
            name="introduction"
            label="个人介绍"
            type="textarea"
            rows="4"
            placeholder="请简要介绍您自己，包括教育背景、工作经历等"
            :rules="[{ required: true, message: '请填写个人介绍' }]"
          />
        </div>

        <!-- 提交按钮 -->
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit">
            提交申请
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { showToast } from 'vant'

const showAreaPopup = ref(false)
const teachingAreas = [
  '编程开发',
  '设计创意',
  '数据分析',
  '职业技能',
  '语言学习',
  '生活兴趣'
]

const formData = ref({
  name: '',
  phone: '',
  email: '',
  teachingArea: '',
  experience: '',
  certificate: [],
  introduction: ''
})

const onAreaConfirm = (value) => {
  formData.value.teachingArea = value
  showAreaPopup.value = false
}

const afterRead = (file) => {
  // 这里处理图片上传逻辑
  console.log('上传文件:', file)
}

const onSubmit = (values) => {
  console.log('提交申请:', values)
  // TODO: 调用接口提交申请
  showToast({
    type: 'success',
    message: '申请提交成功',
    onClose: () => {
      // 提交成功后返回上一页
      window.$router.back()
    }
  })
}
</script>

<style lang="scss" scoped>
.apply-teacher-page {
  min-height: 100vh;
  background-color: #f7f8fa;

  .apply-form {
    padding: 16px;

    .form-section {
      margin-bottom: 24px;
      background-color: #fff;
      border-radius: 8px;
      overflow: hidden;

      .section-title {
        padding: 16px;
        font-size: 16px;
        font-weight: 500;
        color: #323233;
        border-bottom: 1px solid #ebedf0;
      }

      .van-field {
        margin: 0;
      }
    }
  }
}
</style>
